<template>
  <h1>App</h1>
  <!-- 在模板中使用 suspense 结合 template 插槽 -->
  <!-- 即 default 插槽为异步组件 -->
  <!-- fallback 插槽为异步组件加载时设置的 html -->
  <Suspense>
    <template #default>
      <Async></Async>
    </template>
    <template #fallback>
      <h1>loading...</h1>
    </template>
  </Suspense>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

// 异步组件：组件中的数据需要发送异步请求来获取的组件
// 异步组件可以在资源空闲时发起加载请求，可以用于在等待主页面加载完成后再请求资源
// 因此使用异步组件可以减小整个页面加载时间，同时异步组件也为非第一时间加载的组件
// 使用异步组件拆解页面内容，可以提高性能

// 在发起异步请求等待响应过程中，组件某些区域表现为空白
// 即需要设置其他内容在异步组件加载过程中来替换等待的空白
// 在 html 模板中使用 Suspense 组件，配合 default 和 fallback 插槽
// default 插槽内的模板为异步组件
// fallback 插槽内的模板为异步组件加载时，替代显示的 html

// 异步组件使用 defineAsyncComponent 定义，返回值为异步组件的实例
// 参数为回调函数，回调函数返回值为调用 import 导入的异步组件实例

// 在使用 npm run build 打包后的文件中，异步组件会被额外打包为一个 js 文件区别于一般组件


// 插入异步组件，使用 defineAsyncComponent 定义组件实例
// 参数为回调函数，回调函数返回值为 import 引入的组件实例
const Async = defineAsyncComponent(() => import('./Async.vue'))
</script>
<style scoped></style>
